<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <div class="filter-container">
                <el-button-group>
                    <el-button v-if="menuManager_btn_add" type="primary" icon="plus" @click="handlerAdd">添加
                    </el-button>
                    <el-button v-if="menuManager_btn_edit" type="primary" icon="edit" @click="handlerEdit">编辑
                    </el-button>
                    <el-button v-if="menuManager_btn_del" type="primary" icon="delete" @click="handleDelete">删除
                    </el-button>
                </el-button-group>
            </div>

            <el-row>
                <el-col :span="8" style="margin-top:15px;">
                    <el-tree class="filter-tree" node-key="id" highlight-current :data="treeData" :default-expanded-keys="aExpandedKeys" :filter-node-method="filterNode" :props="defaultProps" @node-click="getNodeData" @node-expand="nodeExpand" @node-collapse="nodeCollapse" />
                </el-col>
                <el-col :span="16" style="margin-top:15px;">
                    <el-card class="box-card">
                        <el-form ref="form" :label-position="labelPosition" label-width="80px" :model="form">
                            <el-form-item label="父级节点" prop="parentId">
                                <el-input v-model="form.parentId" :disabled="true" placeholder="请输入父级节点" />
                            </el-form-item>
                            <el-form-item label="节点ID" prop="menuId">
                                <el-input v-model="form.menuId" :disabled="formEdit" placeholder="请输入节点ID" />
                            </el-form-item>
                            <el-form-item label="标题" prop="name">
                                <el-input v-model="form.name" :disabled="formEdit" placeholder="请输入标题" />
                            </el-form-item>
                            <el-form-item label="权限标识" prop="permission">
                                <el-input v-model="form.permission" :disabled="formEdit" placeholder="请输入权限标识" />
                            </el-form-item>
                            <el-form-item label="图标" prop="icon">
                                <avue-crud-icon-select v-model="form.icon" :icon-list="iconList" :disabled="formEdit" placeholder="请输入图标" />
                            </el-form-item>
                            <el-form-item label="类型" prop="type">
                                <el-select v-model="form.type" class="filter-item" :disabled="formEdit" placeholder="请输入资源请求类型">
                                    <el-option v-for="item in typeOptions" :key="item" :label="item | typeFilter" :value="item" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="排序" prop="sort">
                                <el-input v-model="form.sort" type="number" :disabled="formEdit" placeholder="请输入排序" />
                            </el-form-item>
                            <el-form-item label="前端组件" prop="component">
                                <el-input v-model="form.component" :disabled="formEdit" placeholder="请输入描述" />
                            </el-form-item>
                            <el-form-item label="前端地址" prop="component">
                                <el-input v-model="form.path" :disabled="formEdit" placeholder="iframe嵌套地址" />
                            </el-form-item>
                            <el-form-item label="路由缓冲" prop="component">
                                <el-switch v-model="form.keepAlive" :disabled="formEdit" active-color="#13ce66" inactive-color="#ff4949" :active-value="&quot;1&quot;" :inactive-value="&quot;0&quot;" />
                            </el-form-item>
                            <el-form-item v-if="formStatus == 'update'">
                                <el-button type="primary" @click="update">更新
                                </el-button>
                                <el-button @click="onCancel">取消</el-button>
                            </el-form-item>
                            <el-form-item v-if="formStatus == 'create'">
                                <el-button type="primary" @click="create">保存
                                </el-button>
                                <el-button @click="onCancel">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </basic-container>
    </div>
</template>

<script>

import {
    addObj,
    delObj,
    fetchMenuTree,
    getObj,
    putObj
} from "@/api/user";
import { mapGetters } from "vuex";
import iconList from "@/const/iconList";

export default {
    name: "PageAuthMenu",
    filters: {
        typeFilter(type) {
            const typeMap = {
                0: "菜单",
                1: "按钮"
            };
            return typeMap[type];
        }
    },
    data() {
        return {
            iconList: iconList,
            list: null,
            total: null,
            formEdit: true,
            formAdd: true,
            formStatus: "",
            showElement: false,
            typeOptions: ["0", "1"],
            methodOptions: ["GET", "POST", "PUT", "DELETE"],
            listQuery: {
                name: undefined
            },
            treeData: [],
            oExpandedKey: {
                // key (from tree id) : expandedOrNot boolean
            },
            oTreeNodeChildren: {
                // id1 : [children] (from tree node id1)
                // id2 : [children] (from tree node id2)
            },
            aExpandedKeys: [],
            defaultProps: {
                children: "children",
                label: "name"
            },
            labelPosition: "right",
            form: {
                permission: undefined,
                name: undefined,
                menuId: undefined,
                parentId: undefined,
                icon: undefined,
                sort: undefined,
                component: undefined,
                type: undefined,
                path: undefined
            },
            currentId: -1,
            menuManager_btn_add: false,
            menuManager_btn_edit: false,
            menuManager_btn_del: false
        };
    },
    computed: {
        ...mapGetters(["elements", "permissions"])
    },
    created() {
        this.getList();
        this.menuManager_btn_add = this.permissions["sys_menu_add"];
        this.menuManager_btn_edit = this.permissions["sys_menu_edit"];
        this.menuManager_btn_del = this.permissions["sys_menu_del"];
    },
    methods: {
        getList() {
            fetchMenuTree(this.listQuery).then(response => {
                this.treeData = response.data.data;
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        nodeExpand(data) {
            const aChildren = data.children;
            if (aChildren.length > 0) {
                this.oExpandedKey[data.id] = true;
                this.oTreeNodeChildren[data.id] = aChildren;
            }
            this.setExpandedKeys();
        },
        nodeCollapse(data) {
            this.oExpandedKey[data.id] = false;
            // 如果有子节点
            this.treeRecursion(this.oTreeNodeChildren[data.id], oNode => {
                this.oExpandedKey[oNode.id] = false;
            });
            this.setExpandedKeys();
        },
        setExpandedKeys() {
            const oTemp = this.oExpandedKey;
            this.aExpandedKeys = [];
            for (const sKey in oTemp) {
                if (oTemp[sKey]) {
                    this.aExpandedKeys.push(parseInt(sKey));
                }
            }
        },
        treeRecursion(aChildren, fnCallback) {
            if (aChildren) {
                for (let i = 0; i < aChildren.length; ++i) {
                    const oNode = aChildren[i];
                    fnCallback && fnCallback(oNode);
                    this.treeRecursion(oNode.children, fnCallback);
                }
            }
        },

        getNodeData(data) {
            if (!this.formEdit) {
                this.formStatus = "update";
            }
            getObj(data.id).then(response => {
                this.form = response.data.data;
            });
            this.currentId = data.id;
            this.showElement = true;
        },
        handlerEdit() {
            if (this.form.menuId) {
                this.formEdit = false;
                this.formStatus = "update";
            }
        },
        handlerAdd() {
            this.resetForm();
            this.formEdit = false;
            this.formStatus = "create";
        },
        handleDelete() {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                delObj(this.currentId).then(() => {
                    this.getList();
                    this.resetForm();
                    this.onCancel();
                    this.$notify({
                        title: "成功",
                        message: "删除成功",
                        type: "success",
                        duration: 2000
                    });
                });
            });
        },
        update() {
            putObj(this.form).then(() => {
                this.getList();
                this.$notify({
                    title: "成功",
                    message: "更新成功",
                    type: "success",
                    duration: 2000
                });
            });
        },
        create() {
            addObj(this.form).then(() => {
                this.getList();
                this.$notify({
                    title: "成功",
                    message: "创建成功",
                    type: "success",
                    duration: 2000
                });
            });
        },
        onCancel() {
            this.formEdit = true;
            this.formStatus = "";
        },
        resetForm() {
            this.form = {
                permission: undefined,
                name: undefined,
                menuId: undefined,
                parentId: this.currentId,
                icon: undefined,
                sort: undefined,
                component: undefined,
                type: undefined,
                path: undefined
            };
        }
    }
};
</script>

